page-setting {
  ion-content {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden !important;
    letter-spacing: 0.2vw;
    word-spacing: 0.1vw;
color: #fff;
    .search_header {
      width: 100vw;
      height: 10vh;
      position: relative;
      padding-top: 2vh;

      .back_div {
        width: 14vw;
        height: 7vh;
        background-image: url('../../assets/imgs/app_icon/back.svg');
        position: absolute;
        left: 0;
        top: 2vh;
        background-repeat: no-repeat;
        background-position: center;
      }

      .cacle_div {
        width: 14vw;
        height: 7vh;
        position: absolute;
        right: 0;
        top: 2vh;
        line-height: 7vh;
        text-align: center;
        display: none;
      }

      ion-searchbar {
        width: 72vw;
        background: none;
        height: 7vh !important;
        margin: 0 14vw;
        min-height: 7vh !important;
        background: none !important;
        border: none;

        input {
          background: rgba($color: #fff, $alpha: 0.8) !important;
          color: rgba($color: #000, $alpha: 0.8) !important;
          font-size: 4.2vw;
          font-weight: 700;
          letter-spacing: 0.3vw;
        }

        input::-webkit-input-placeholder {
          color: rgba($color: #000, $alpha: 0.8);
        }
      }
    }


    .serachList {
      width: 100vw;
      height: 90vh;
      position: fixed;
      left: 0;
      top: 10vh;
      z-index: 9999;
      overflow: hidden;
      overflow-y: scroll;
      display: none;

      .search_result {

        .tips {
          display: none;
          text-align: center;
          margin-top: 1vh;
        }

        ul {
          list-style: none;
          width: 100vw;
          margin: 0;
          padding: 0;

          li {
            width: 100vw;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 4vw;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);

            div {
              float: left;
              width: 4vw;
              height: 4vw;
              background-image: url('../../assets/imgs/app_icon/search.svg');
              background-position: center;
              background-repeat: no-repeat;
              margin-right: 2vw;
            }
          }
        }
      }

      .serachList_div {
        padding: 4vw;
        position: relative;

        .title_div {
          width: 100%;
          height: 5vw;

          .title {
            font-size: 4vw
          }

          .icons {
            float: right;
            width: 4.2vw;
          }
        }

        .button_div {
          width: 100%;
          display: block;
          list-style: none;
          padding: 0;
          margin: 0;
          position: relative;

          li {
            width: 28vw;
            float: left;
            margin-left: 4vw;
            font-size: 4.2vw;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 1vw;
            margin-top: 4vw;
            text-align: center;
            height: 8vw;
            line-height: 8vw;
            font-size: 3.4vw;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            letter-spacing: 0.5vw;
            overflow: hidden;
            padding: 0 1vw;
            .delete_histroy {
              width: 3vw;
              height: 3vw;
              position: absolute;
              top:0;
              left: 0;
              background-image: url('../../assets/imgs/app_icon/deletes.svg');
              display: none;
              background-size: 100% 100%;
            }
          }

          li:nth-child(3n+1) {
            margin-left: 0;
          }

          .shaky {
            animation: shakelittle 3s ease-in-out infinite;
            transform-origin: center center;
          }

          .shaky div {
            display: block;
          }
        }

        .title_div::after,
        .button_div::after {
          display: block;
          content: '';
          clear: both;
        }

      }
    }

    .serachList::after {
      clear: both;
      content: '';
      display: block;
    }

    .collection {
      width: 100vw;
      padding: 0 4vw;
      height: 88vh;
      margin-top: 2vh;
      position: relative;

      .collection_list {
        width: 100%;
        position: relative;
        margin-top: 8vw;

       

        .title_div {
          width: 100%;
          height: 5vw;

          .title {
            font-size: 4vw
          }

          .icons {
            float: right;
            width: 4.2vw;
          }
        }

        .button_div {
          width: 100%;
          display: block;
          list-style: none;
          padding: 0;
          margin: 0;
          position: relative;

          li {
            width: 28vw;
            float: left;
            margin-left: 4vw;
            font-size: 4.2vw;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 1vw;
            margin-top: 4vw;
            text-align: center;
            height: 8vw;
            line-height: 8vw;
            font-size: 3.4vw;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            letter-spacing: 0.5vw;
            transition: background 0.3s;
            overflow: hidden;
            padding: 0 1vw;
            .delete_histroy {
              width: 3vw;
              height: 3vw;
              position: absolute;
              top:0;
              left: 0;
              background-image: url('../../assets/imgs/app_icon/deletes.svg');
              display: none;
              background-size: 100% 100%;
            }
          }

          .trs {
            background: rgba(0, 0, 0, 0.2);
          }

          li:nth-child(3n+1) {
            margin-left: 0;
          }

          .shaky {
            animation: shakelittle 3s ease-in-out infinite;
            transform-origin: center center;
          }

          .shaky div {
            display: block;
          }
        }

        .title_div::after,
        .button_div::after {
          display: block;
          content: '';
          clear: both;
        }
      }

      .collection_list:first-child {
        margin-top: 0;
      }
    }
  }


  @keyframes shakelittle {
    2% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    4% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    6% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    8% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    10% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    12% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    14% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    16% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    18% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    20% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    22% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    24% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    26% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    28% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    30% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    32% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    34% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    36% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    38% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    40% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    42% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    44% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    46% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    48% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    50% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    52% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    54% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    56% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    58% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    60% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    62% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    64% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    66% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    68% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    70% {
      transform: translate(1px, 0px) rotate(.5deg)
    }

    72% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    74% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    76% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    78% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    80% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    82% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    84% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    86% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    88% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    90% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    92% {
      transform: translate(1px, 1px) rotate(.5deg)
    }

    94% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    96% {
      transform: translate(0px, 0px) rotate(.5deg)
    }

    98% {
      transform: translate(0px, 1px) rotate(.5deg)
    }

    0%,
    100% {
      transform: translate(0, 0) rotate(0)
    }
  }

}
